<template>
  <div class="home-page">
   
    <div class="hy2-content">
      <div class="hy-img" :class="[activeClass]">
        <img class="title" src="../assets/images/p2.png" />
      </div>
      <div class="hy-ft" :class="[activeClass]">
        <p>国内首家共享单车/电单车 城市路面服务机构 </p>
        <p>为城市管理者解决便捷出行后遗症 为城市市民提供便捷之后的安宁 为共享出行提供服务及数据支撑 </p>
      </div>
    </div>

  </div>
</template>
<script>

export default {
  name: 'HomePage2',
  data() {
    return {
      activeClass: "",
      activeFontClass: ""
    }
  },
  mounted() {
    this.addAnimate();
  },
  methods: {
    addAnimate() {
      this.activeClass = "display animate__animated animate__fadeInUp animate__slow";
      this.activeFontClass = "display animate__animated animate__fadeInDown animate__slow animate__delay-2s"
    },
    removeAnimate() {
      this.activeClass = "";
      this.activeFontClass = "";
    }
  }
}
</script>
<style lang="scss" scoped>
.home-page {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  background-size: cover;
  .hy2-content{
    padding-top: 253px;
    padding-left: 257px;
    display: flex;
    .hy-img{
      display: none;
      img{
        width: 570px;
        height: 599px;
      }
    }
    .hy-ft{
      flex: 1;
      display: none;
      padding-left: 156px;
      p:nth-child(1){
        text-align: left;
        width: 552px;
        font-size: 48px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #333333;
        padding-top: 80px;
      }
      p:nth-child(2){
        text-align: left;
        padding-top: 60px;
        width: 376px;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 300;
        color: #333333;
        line-height: 48px;
      }
    }
  }

  .display {
    display: block !important;
  }

}
</style>
